<template>
  <div class="commodityContainer">
    <!-- //头部 -->
    <div class="header">
      <van-icon
        @click="goHome"
        class="leftIcon"
        size="80px"
        name="wap-home-o"
      />
      网易严选
      <div class="rightIcon">
        <van-icon class="centerIcon" size="80px" name="search" />
        <van-icon
          class="rightIcon1"
          size="80px"
          @click="goCard"
          name="shopping-cart-o"
        />
      </div>
    </div>
    <!-- 头部下面 -->
    <div class="headerBottom">
      <ul class="headerBottom1">
        <li class="headerBottom2">猫粮</li>
        <li>猫粮</li>
        <li>猫粮</li>
        <li>猫粮</li>
        <li>猫粮</li>
        <li>猫粮</li>
        <li>猫粮</li>
        <li>猫粮</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "commodity",
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-family: 黑体;
  font-weight: 800;
  background: #fafafa;
  padding: 0.27rem;
  border-bottom: 0.03rem solid #d8d8d8;
  line-height: 35px;
  text-align: center;
  .leftIcon {
    margin-top: 0.08rem;
    margin-right: 0.667rem;
  }
  .rightIcon1 {
    margin-left: 10px;
  }
}
.headerBottom {
  .headerBottom1 {
    display: flex;
    justify-content: space-around;
  }
  .headerBottom2{
  }
}
</style>